/*switcher*/
.switcher label {
    width: 56px;
    height: 20px;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    background: linear-gradient(top,rgb(122,138,58),rgb(148,165,70)) no-repeat left top/0 100%,
                linear-gradient(top,rgb(170,65,24),rgb(180,75,35)) no-repeat left top/100% 100%;
    box-shadow: inset 0 2px 3px 0 rgba(20,20,20,0.3);
    border: 1px solid rgba(20,20,20,0.8);
    cursor: pointer;
    transition:background-size 500ms ease;
}
.switcher label:before {
    content: "|||";
    display: block;
    position: absolute;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: rgb(228,228,228);
    text-shadow:1px 0 0 #fff;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: linear-gradient(top,rgb(255,255,255),rgb(236,236,236));
    transition:left 300ms ease;
}
.switcher label:after {
    content: attr(data-off);
    line-height: 20px;
    text-indent: 27px;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    transform:scale(0.84);
}
.switcher input:checked + label {
    background: linear-gradient(top,rgb(122,138,58),rgb(148,165,70)) no-repeat left top/100% 100%,
                linear-gradient(top,rgb(170,65,24),rgb(180,75,35)) no-repeat left top/100% 100%;
}
.switcher input:checked + label:before {left: 36px;}
.switcher input:checked + label:after {content:attr(data-on);text-indent: 12px;}
.switcher input {display: none;}

